<template>
  <div class="order-goods-list">
    <van-nav-bar
      title="商品清单"
      left-arrow
      :fixed=true
      @click-left="handleToBack"
    />
    <div class="list-title">
      <span>商品</span>
      <span class="total">{{selectedCount}}</span>
    </div>
    <ul>
      <li
        class="goods-list"
        v-for="(item,index) in goods"
        :key=index
      >
        <div class="list-item">
          <img :src="item.smallImage" alt="">
        </div>
        <div class="text-detail">
          <p class="name">{{item.name}}</p>
          <span class="sub-param">单价{{item.price}}</span>
          <span class="sub-param">商品{{item.num}}</span>
        </div>
        <div class="good-price">{{item.price*item.num}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 从store中取选中的商品信息
    ...mapGetters({
      selectedCount: 'SELECTED_GOODS_COUNT',
      goods: 'SELECTED_GOODS',
    }),
  },
  methods: {
    handleToBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.order-goods-list {
  @include setAllcover(200);
  background-color: $bg-color-page;
  overflow-y: auto;
  overflow-x: hidden;
  .list-title {
    @include setWH(100%, 100%);
    line-height: px2rem(26);
    padding-left: px2rem(8);
    margin-top: px2rem(52);
    background-color: $text-color-white;
    border-bottom: solid  px2rem(0.2) #e8e9e8;
    font-size: px2rem(16);
    .total {
      padding-right: px2rem(35);
      font-size:  px2rem(16);
      float: right;
    }
  }
  .goods-list {
    display: flex;
    @include setWH(100%, px2rem(52));
    background-color: $text-color-white;
    border-bottom: solid  px2rem(0.2) #e8e9e8;
    .list-item {
      @include setWH(10%, px2rem(52));
      img {
        @include setWH(100%, px2rem(44));
        padding: px2rem(9);
      }
    }
    .text-detail {
      @include setWH(70%, px2rem(52));
      padding-left: px2rem(16);
      .name {
        font-size: px2rem(14);
        padding: px2rem(5) 0;
        @include text-ellipsis;
      }
      .sub-param {
        @include setFontColor(px2rem(10), $text-color-pl);
        padding-right: px2rem(9);
      }
    }
    .good-price {
      padding-top: px2rem(5);
      font-size:px2rem(14);
    }
  }
}
</style>

